<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>登录</title>
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<link rel="stylesheet" href="../css/font-awesome.min.css" />
		<script src="../js/vue.min.js"></script>
		<script src="../js/axios.min.js"></script>
		<style>
			.container {
				display: flex;
				position: absolute;
				justify-content: center;
				align-items: center;
				height: 100%;
				width: 100%;
				background: url(../img/login_bg.jpg) no-repeat;
				background-size: cover;
			}

			.login-box {
				width: 600px;
				height: 300px;
				min-height: 300px;
				min-width: 480px;
				background-color: rgba(255, 255, 255, 0.5);
				box-shadow: 1px 1px 10px 1px #9b9b9b;
			}

			.login-banner {
				height: inherit;
				border-radius: 4px 0 0 4px;
				background-color: rgba(15, 95, 177, 0.7);
			}

			footer {
				position: absolute;
				bottom: 0;
			}
		</style>

    </head>

	<body>
		<!--登录-->
		<div class="container">
			<div class="panel login-box" id="lg">
				<div class="col-xs-5 login-banner">

				</div>
				<div class="col-xs-7 ">
					<div class="panel-body login-content">
						<div class="panel-header">
							<h3>登录</h3>
						</div>
						<label class="loginTips"></label>
						<div class="input-group">
							<label for="username" class="input-group-addon"><i class="fa fa-user"></i></label>
							<input v-model="name" type="text" class="form-control" id="username" placeholder="请输入账号" />
						</div>
						<label class="usernameTips"></label>
						<div class="input-group">
							<label for="password" class="input-group-addon"><i class="fa fa-lock"></i></label>
							<input v-model="pass" type="password" class="form-control" id="password" placeholder="请输入密码" />
						</div>
						<label class="passwordTips"></label>
						<div class="form-group text-center" style="width: 75%;">
							<a class="btn btn-primary" id="login" @click="get">登录</a>
							<span>&nbsp;&nbsp;</span>
							<a class="forgetpwd" href="verityMail.html">忘记密码</a>
						</div>
					</div>
				</div>
			</div>
			<footer>
				<p>Copyright © 2018-2019 JIDI All rights reserved</p>
			</footer>
		</div>

		<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="../js/bootstrap.min.js"></script>
        <script src="../js/cookieUtil.js"></script>

		<script type="text/javascript">
			window.onload = function() {
				var vm = new Vue({
					el: '#lg',
					data: {
						name: '',
						pass: ''

					},
					methods: {
						get: function() {
							//发送get请求
							axios.defaults.withCredentials = true;

							axios.get('http://donting.free.idcfengye.com/login/login', {　　
								params: {
									'name': vm.name,
									"pass": vm.pass
								}
							}).then(function(response) {
								var rs = response.data;
								　
								if(rs.code == 200) {
                                    setCookie('name',rs.data.name,1);
                                    setCookie('userID',rs.data.ID,1);
									document.location = "index.html";
								} else {
									alert("登陆失败" + rs.messg);
								}

							}).catch(function(error) {　　
								alert("连接超时！"+error);
							});

						}
					}
				});
			}
		</script>
	</body>

</html>